<template>
    <div id="background">
        <el-container>
            <el-header id="examResultHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                       <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">测试结果</span>
                    </el-col>
                 </el-row>
            </el-header>
            <el-main id="examResultMain">
                <el-row type="flex" style="margin-top:5%;margin-bottom:5%" class="imgCol">
                    <span class="words timeCss">本次用时：{{count.hr}}小时{{count.min}}分钟{{count.sec}}秒</span>
                </el-row>
                <el-row class="imgCol" id="score">
                    <div  style="position:relative;text-align:center;">
                        <img v-bind:src="scoreBack" style="height:80px" />
                        <div style="position:absolute;z-indent:2;left:0;top:15px;;right:0;bottom:0">
                            <span class="scoreCss">{{score}}</span><span style="color:#53cdf5">分</span>
                        </div>
                    </div>
                </el-row>
                <el-card id="examResultCard">
                    <el-row>
                        <el-divider><span style="color:#53cdf5">得分榜</span></el-divider>
                    </el-row>
                    <div v-for="score in scores" v-bind:key="score.num" >
                        <el-row>
                            <el-col :xs="2" :sm="2" :md="2">
                                <span class="otherScore">{{score.num}}.</span>
                            </el-col>
                            <el-col :xs="17" :sm="17" :md="17">
                                <span class="otherScore">{{score.name}}</span>
                            </el-col>
                            <el-col :xs="5" :sm="5" :md="5" >
                                <span class="otherScore">{{score.score}}分</span>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row class="imgCol">
                        <el-pagination
                            class="examResultPage"
                            :page-size="6"
                            layout="prev, pager, next"
                            :pager-count="3"
                            :total="70">
                        </el-pagination>
                    </el-row>
                </el-card>
            </el-main>
            <!-- <el-footer id="examResultFoot">
                <el-row type="flex" class="imgCol">
                    <button class="btnExamResult" @click="checkanswerCard">查看答题情况</button>
                </el-row>
            </el-footer> -->
            <el-footer id="shiCaoIntroduceFoot">
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%">
                    <button class="btnExamResult" @click="checkanswerCard">查看答题情况</button>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../../assets/img/mine/geRenZhongXin/back.png'
import scoreBack from '../../../assets/img/tiKu/exam/scoreBack.png'
import { Toast } from 'vant';
export default {
    data(){
        return{
            //记录本次测试的得分
            score:'',
            //记录本次答题的情况
            judgeAnswer:[],
            questionType:[],
            TiMus:[],
            //记录用户答过的题目
            answerMap:{},
            //记录本次答题用时
            count:{
                hr:'',
                min:'',
                sec:'',
                allsec:'',
            },
            backIcon:backIcon,
            scoreBack:scoreBack,
            normalHeight:document.documentElement.clientHeight,
            scores:[
                {
                    num:1,
                    name:'massami',
                    score:100
                },
                {
                    num:2,
                    name:'鑫酱',
                    score:100
                },
                {
                    num:3,
                    name:'柯南',
                    score:98
                },
                {
                    num:4,
                    name:'风间彻',
                    score:97
                },
                {
                    num:5,
                    name:'妮妮',
                    score:96
                },
            
                {
                    num:6,
                    name:'胡图图',
                    score:66
                },
                {
                    num:7,
                    name:'MS老大',
                    score:55
                },
                {
                    num:8,
                    name:'123',
                    score:44
                }
            ]
        }
    },
    mounted(){
        // this.score=this.$route.query.score;
        // this.judgeAnswer=this.$route.query.judgeAnswer;
        // this.count.allsec=this.$route.query.time;
        // this.questionType=this.$route.query.questionType;
        // this.tiMus=this.$route.query.tiMus;
        // this.answerMap=this.$route.query.answerMap;
        this.score=sessionStorage.getItem('score');
        // this.judgeAnswer=sessionStorage.getItem('judgeAnswer');
        this.count.allsec=sessionStorage.getItem('time');
        // this.questionType=sessionStorage.getItem('questionType');
        // this.tiMus=sessionStorage.getItem('tiMus');
        // this.answerMap=sessionStorage.getItem('answerMap');

        this.calculateTime();
        console.log(this.score);
        console.log(this.count.allsec);
        // console.log(this.tiMus);

         var normalHeight=sessionStorage.getItem('normalHeight');
        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";
    
        var head=document.getElementById("examResultHead");
        var main=document.getElementById("examResultMain");
        // var foot=document.getElementById("examResultFoot");
        if(normalHeight<800){
            console.log("<800");
            var headHeight=normalHeight/30 *4 ;
            var mainHeight=normalHeight/30 *22.5 ;          
            // var footHeight=normalHeight/30 *3 ;
        }else{
            console.log(">800");
            var headHeight=normalHeight/30 *4 ;
            var mainHeight=normalHeight/30 *23 ;          
            // var footHeight=normalHeight/30 *3;
        }
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";
        // console.log("footHeight:"+footHeight);
        // foot.style.height=footHeight+"px";
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //计算用时情况
        calculateTime(){
            let hr = parseInt(this.count.allsec / 3600);
            let min = parseInt(this.count.allsec %3600 / 60);
            let sec = parseInt(this.count.allsec %3600 % 60);
            // console.log(hr+" "+min+" "+sec);
            this.count.hr = hr > 9 ? hr : '0' + hr;
            this.count.min = min > 9 ? min : '0' + min;
            this.count.sec = sec > 9 ? sec : '0' + sec;
        },
        //查看答题情况
        checkanswerCard(){
            this.$router.push({
                path:'/tiKu/examAnswerCard',
                // query:{
                //     judgeAnswer:this.judgeAnswer,
                //     questionType:this.questionType,
                //     tiMus:this.tiMus,
                //     answerMap:this.answerMap
                // }
            })
        },
        
    }
}
</script>
<style>
.examResultPage .el-pager li.active {
    color: #53cdf5;
}
.examResultPage .el-pager li {
    font-size: 8px;
}
.el-main,.el-header,.el-footer,.el-aside{
    padding: 0px;
}
.btnExamResult{
    background-color: #53cdf5;
    height: 40px;
    width: 60%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    border-style: none;
}
.el-divider--horizontal {
    background-color: #53cdf5;
}
#examResultCard{
    margin:15px 25px 15px 25px;
}
.scoreCss{
    font-size: 2.5em;
    color: #53cdf5;
}
.otherScore{
    font-size: 14px;
    color: #707070;
}
.timeCss{
    font-size:1.25em;
}
.el-main{
    padding: 0px;
}
.el-header{
    padding: 0px;
}
#examResultHead{
    background-color: #53cdf5;
    color: #707070;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.words{
    color: #707070;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
